<template>
    <div class="edit page">
        <formHeader :title="this.title" color></formHeader>
        <div class="con">
            <div class="title">
                请绑定本人银行卡
            </div>
            <div class="form">
                <div class="cell">
                    <div class="inputTitle">开户人</div>
                    <input v-model="accName" type="text" placeholder="请输入开户人">
                </div>
                <div class="cell">
                    <div class="inputTitle">开户银行</div>
                    <input v-model="bank" type="text" placeholder="请输入开户银行">
                </div>
                <div class="cell">
                    <div class="inputTitle">银行分行</div>
                    <input v-model="accBranch" type="text" placeholder="请输入银行分行">
                </div>
                <div class="cell">
                    <div class="inputTitle">银行卡号</div>
                    <input v-model="number" type="text" placeholder="请输入银行卡号">
                </div>
            </div>
            <div class="add" @click="submit">下一步</div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {saveBankCard,editBankCard} from '@/api/order'
    import {showCorrect} from "../../dialog"

    export default {
        name: "edit",
        components:{formHeader},
        data(){
            return{
                accName:null,
                bank:null,
                accBranch:null,
                number:null,
                title:'新增银行卡',
            }
        },
        methods:{
            submit(){
                if (this.$route.query.type==1){
                    editBankCard(this.$route.query.id,this.accName,this.bank,this.accBranch,this.number).then(res=>{
                        if (res.code==10000){
                            showCorrect('修改成功')
                            this.$router.go(-1)
                        }
                    })
                }else {
                    saveBankCard(this.accName,this.bank,this.accBranch,this.number).then(res=>{
                        if (res.code==10000){
                            showCorrect('添加成功')
                            this.$router.go(-1)
                        }
                    })
                }
            }
        },
        activated() {
            this.accName = this.$route.query.accName||null
            this.bank = this.$route.query.bank||null
            this.accBranch = this.$route.query.accBranch||null
            this.number = this.$route.query.number||null

            if (this.$route.query.type==1){
                this.title = '编辑银行卡'
            }
        }
    }
</script>

<style scoped lang="stylus">
.edit
    background $page-bg
    font-family PingFangSC-Regular,PingFang SC;
    .con
        margin-top 47px
        .title
            padding-left 13px
            height 41px
            color  #666
            font-size 15px
            line-height 41px
        .form
            background-color: #fff
            padding 0 13px
            .cell
                height 48px
                display flex
                align-items center
                color #333
                .inputTitle
                    font-size 17px
                    width 86.5px
                    margin-right 12px
                input
                    flex 1
                    font-size 17px
                input:focus
                    outline none
        .add
            background-color: #00d6c0
            height 49px
            width 350px
            margin 0 auto
            text-align center
            line-height 49px
            font-size 18px
            color #fff
            border-radius 4px
            margin-top 20px
</style>